import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App/>, document.getElementById('root'));
const element = <h1>Hello,,,,, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('root')
);
//第一种写法
// function tick() {
//     const element = (
//         <div>
//             <h1>Hello, world!</h1>
//             <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
//         </div>
//     );
//     ReactDOM.render(
//         element,
//         document.getElementById('root')
//     );
// }
//
// setInterval(tick, 1000);
//以上实例通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()。

//第二种写法
// function Clock(props) {
//     return (
//         <div>
//             <h1>Hello, world!</h1>
//             <h2>现在是 {props.date.toLocaleTimeString()}.</h2>
//         </div>
//     );
// }
//
// function tick() {
//     ReactDOM.render(
//         <Clock date={new Date()} />,
//         document.getElementById('root')
//     );
// }
// setInterval(tick, 1000);


//第三种写法
// class Clock extends React.Component {
//     render() {
//         return (
//             <div>
//                 <h1>Hello, world!</h1>
//                 <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
//             </div>
//         );
//     }
// }
//
// function tick() {
//     ReactDOM.render(
//         <Clock date={new Date()} />,
//         document.getElementById('root')
//     );
// }
//
// setInterval(tick, 1000);


//总结
// var myStyle = {color:'red',textAlign:'center'}
//
// class Name extends React.Component {
//     render() {
//         return <h1 style={myStyle}>网站名称：{this.props.name}</h1>;
//     }
// }
// class Url extends React.Component {
//     render() {
//         return <h1>网站地址：{this.props.url}</h1>;
//     }
// }
// class Nickname extends React.Component {
//     render() {
//         return <h1>网站地址：{this.props.nickname}</h1>;
//     }
// }
//
// function Apps(props) {
//     return (
//         <div>
//             <Name name={props.name}/>
//             <Url  url={props.url}/>
//             <Nickname  nickname={props.nickname}/>
//         </div>
//     );
// }
// ReactDOM.render(
//     <Apps name={"菜鸟教程"} url={"http://www.runoob.com"} nickname={"Runoob"}/>,
//     document.getElementById('example')
// );
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA

class ClickApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {clickCount:0};
    }
    handleClick= () => {
        console.log(1231)
        this.setState({
            clickCount: this.state.clickCount + 1
        })
    }
    render() {
        return (
            <div>
                <h2>点击下面按钮</h2>
                <button onClick={this.handleClick}>点击我</button>
                <p>你点击了多少次：{this.state.clickCount}</p>
            </div>
        )
    }

}

ReactDOM.render(
    <ClickApp/>,
    document.getElementById("example")
)

serviceWorker.unregister();
